<style>
    #chatView div {
        -webkit-user-select: text;
        height: auto;
    }

    #chatView div * {
        -webkit-user-select: text
    }

    #chatView .chat-wrap {
        font-size: 14px;
        background: #fff;
        padding: 10px;
        margin-bottom: 140px;
        height: calc(100vh - 55px - 186px);
        box-sizing: border-box;
        overflow-y: auto;
    }

    #chatView .chat-wrap.bq-bottom {
        padding-bottom: 210px;
    }

    #chatView .chat-wrap.pic-bottom {
        padding-bottom: 130px;
    }

    #chatView .chat-wrap .list {
        padding-bottom: 20px;
    }


    /* 头像 */
    #chatView .chat-wrap .tx {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }

    #chatView .chat-wrap .tx.img-w img {
        width: 40px;
    }

    #chatView .chat-wrap .tx.img-h img {
        height: 40px;
    }

    /* 内容 */
    #chatView .chat-wrap .c-wrap {
        display: flex;
        align-items: flex-start;
    }

    #chatView .chat-wrap .c-wrap.my {
        justify-content: flex-end;
    }

    #chatView .chat-wrap .c-wrap.my .tx {
        margin-right: 0;
        margin-left: 10px;
        order: 2;
    }

    #chatView .chat-wrap .content {
        background: #eee;
        padding: 5px;
        max-width: 60%;
        border-radius: 5px;
        order: 1;
        word-break: break-all;
    }

    /* 图片 */
    #chatView .chat-wrap .c-wrap .img {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #chatView .chat-wrap .c-wrap .img img {
        width: 100%;
    }

    /* 红包 */
    #chatView .red-wrap .content {
        background: #fff;
        color: #fff;
    }

    #chatView .red-wrap .content .red-img {
        background-image: url('./image/icon/bg_luckybagdialog.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 216px;
        height: 72px;
    }

    #chatView .red-wrap .content .red-img-no {
        background-image: url('./image/icon/mp_bg_luckybagdialog_d.png');
    }

    #chatView .red-wrap .red-word {
        margin-left: 55px;
        padding-top: 15px;
    }

    #chatView .my .red-wrap .red-word {
        margin-left: 0;
        margin-right: 55px;
    }

    #chatView .red-wrap .content .red-text {
        color: #f5d03d;
        font-size: 14px;
    }

    #chatView .red-wrap .content .red-status {
        font-size: 12px;
    }

    /* 输入框 */
    #chatView #input-footer {
        padding: 10px 5px;
        background: #eee;
        position: absolute;
        bottom: 0;
        width: calc(100% - 10px);
        /* max-width: 750px; */
        /* min-width: 320px; */
    }

    #chatView .input-wrap {
        align-items: flex-end;
    }

    #chatView .input-wrap .input {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 7px 5px;
        background: #fff;
        font-size: 14px;
        min-height: 100px;
        width: calc(100% - 20px - 80px - 2px);
    }

    #chatView .input-wrap .send-btn {
        background: #673AB7;
        color: #fff;
        font-size: 14px;
        padding: 7px 3px;
        word-break: keep-all;
        margin-left: 10px;
        border-radius: 5px;
    }

    #chatView .time {
        font-size: 12px;
        background: #aaa;
        color: #fff;
        border-radius: 3px;
        padding: 5px 10px;
        margin: 10px 0;
    }

    #chatView .biaoqing {
        background-image: url('./res/img/face.png');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        margin: 0 5px;
    }

    #chatView .biaoqing.jianpan {
        background-image: url('./res/img/jian_pan.png');
    }

    #chatView .biaoqing.add {
        background-image: url('./res/img/jia.png');
    }

    /* 删除 */
    #chatView .bq-del {
        background-image: url('./res/img/emotion/delete.png');
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        width: 40px;
        height: 40px;
        background-size: 70% 70%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #fff;
        border-radius: 5px;
    }

    /* 表情列表 */
    #chatView .biaoqing-wrap .bq {
        /* padding-bottom: 50px; */
        max-height: 150px;
        overflow-y: auto;
    }

    #chatView .biaoqing-wrap .bq img {
        width: 30px;
        margin: 5px 3px;
    }

    /* 图片面板 */
    #chatView #pic-wrap img {
        width: 60px;
        margin-right: 10px;
        margin-top: 10px;
    }

    /* 撤回 */
    #chatView .recall {
        font-size: 12px;
        color: #999;
        text-align: center;
        padding: 10px 0;
    }

    /* 红包提示 */
    #chatView .hongbao-msg {
        font-size: 12px;
        text-align: center;
        color: #999;
        padding: 10px 0;
    }

    #chatView .hongbao-msg .red-span {
        color: orange;
    }

    /* 语音 */
    #chatView .play-state {
        margin-top: 3px;
    }

    #chatView .play-state .play-state-icon {
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url('./res/img/yy.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    #chatView .recordStart .play-state-icon {
        background-image: url('./res/img/yy.gif');
    }

    #chatView .msg-video {
        position: relative;
    }

    #chatView .video-icon {
        background-image: url('./image/icon/album_ic_playclip.png');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 25px;
        height: 25px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -12.5px;
        margin-left: -12.5px;
    }

    #chatView .audio {
        display: flex;
        align-items: center;
    }

    #chatView #chat-header {
        line-height: 50px;
        padding: 0 20px;
        font-size: 18px;
        font-weight: 700;
        border-bottom: 1px solid #eee;
        position: sticky;
        background: #fff;
        top: 0;
        z-index: 100;
        -webkit-user-select: text;
    }

    .user-name {
        padding: 3px 10px;
        color: #757575;
    }

    .user-name.my {
        text-align: right;
    }
    .words{
        width: 100%;
        overflow: auto;
        display: flex;
        padding-bottom: 8px;
    }
    .words .item{
        margin-right: 10px;
    }
    .words .item .text{
        padding: 2px 10px;
        border-radius: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    .words .item img{
        width: 60px;
        height: 25px;
    }
    .img-pre{
        position: absolute;
        bottom: 180px;
        box-shadow: 0 0 4px #ccc;
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        max-width: 200px;
        word-break: break-all;
    }
    .img-pre img{
        width: 200px;
        height: 200px;
    }
    .loading{
        width: 100%;
        height: 100vh!important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    /* 新增图片预览样式 */
    .image-preview-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        cursor: pointer; /* 明确阴影区域可点击 */
    }

    .image-preview-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .image-preview-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
        background-color: white;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        cursor: default; /* 内容区域不可点击 */
    }

    .preview-image {
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 4px;
    }

    .close-button {
        position: absolute;
        top: -30px;
        right: 0;
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        outline: none;
    }
    
    .newFwbtn{
		background: #4395FF;
		color: #fff;
		word-break: keep-all;
		padding: 10px 25px;
		cursor: pointer;
		border-radius: 5px;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}
</style>

<div id="chatView">
    <header id="chat-header"> 和<span v-if="cityName" style="color: skyblue;">【{{cityName}}】</span> {{toName}} (ID：{{touserid}})的聊天   &nbsp;<a id="get_user_info">用户信息</a>   &nbsp; <span style="color: blue;">充值金额：{{toUserContent}}元</span>  
    <button class="newFwbtn" @click="setUserOtherListTop">置顶</button>
    </header>
    <ul id="js-chat" class="wrap chat-wrap" :class="{'bq-bottom':inputType==1, 'pic-bottom':inputType==2}">
        <div class="loading">
            <img src="/chat/gif/loading.gif" alt="">
        </div>
        <div v-for="(m, index) in ffList">
            <p class="flex-c" v-if="m.showtime">
                <span class="time">{{m.time}}</span>
            </p>
            <div class="recall" v-if="m.status == 3">
                <span>该消息已被撤回</span>
            </div>
            <div v-else>
                <div class="hongbao-msg" v-if="m.type==-1 && m.state ==1">
                    <span v-if="m.data.userid == myuserid">{{m.data.touser_name}}领取了你</span>
                    <span v-else>你领取了{{m.data.user_name}}</span>
                    的<span class="red-span" @click="_url({ id: m.data.chat_id }, 'frame0/hong_bao_detail');">红包</span>
                </div>
                <li class="list" v-else :class="{'audio':m.type == 2}">
                    <p class="user-name" :class="{'my':m.self == 1}">{{m.name}}</p>
                    <div class="c-wrap you " :class="{'my':m.self == 1, 'red-wrap': m.type == 5}">
                        <div class="tx img-h" @click="goUserInfo(m)">
                            <img :src="returnImg(m.head_portrait)" onerror="this.onerror=null;this.src='./image/touxiang.png'" alt="">
                        </div>
                        <div class="content" v-if="m.type == 0 || m.type == 12" v-html="dealContent(m.content)"></div>
                        <div class="content" v-else-if="m.type == 1">
                            <div class="img img-h">
                                <img :src="returnImg(m.content)" onerror="this.onerror=null;this.src='./image/error-img.png'" alt="" @click="openImagePreview(m.content)">
                            </div>
                        </div>
                        <div class="content" v-else-if="m.type == 8">
                            <div class="img img-h">
                                <img :src="returnImg(m.data.cover)" onerror="this.onerror=null;this.src='./image/error-img.png'" alt="">
                            </div>
                        </div>
                        <!-- <div class="content" :class="{'recordStart':audioObj.open==1 && audioObj.id == m.id}" v-else-if="m.type == 2" @click.stop @click="openRecord(index)">
                            <span class="play-state"> <span class="play-state-icon"></span> </span>
                        </div> -->
                        <div class="content" :class="{'recordStart':audioObj.open==1 && audioObj.id == m.id}" v-else-if="m.type == 2">
                            <audio :src="imgurl + m.content" controls>
                            </audio>
                        </div>
                        <div class="content" v-else-if="m.type == 3" @click.stop="openVideo(m.content)">
                            <div class="img img-h msg-video">
                                <img :src="returnImg(m.data.cover)" onerror="this.onerror=null;this.src='./image/error-img.png'" alt="">
                                <i class="video-icon"></i>
                            </div>
                        </div>
                        <!-- <div class="content" v-else-if="m.type == 5" @click="openRed(m)">
                            <div class="red-img" :class="{'red-img-no':m.state==1}">
                                <div class="red-word">
                                    <p class="red-text">{{m.content}}</p>
                                    <p class="red-status" v-if="m.state==0">等待领取</p>
                                    <p class="red-status" v-if="m.state==1">已领取</p>
                                    <p class="red-status" v-if="m.state==2">已过期</p>
                                </div>
                            </div>
                        </div> -->
                        <div class="content" v-else>[不支持的消息类型]</div>
                    </div>
                    <!-- <span v-if="m.type == 2" style="margin-left: 10px;">{{m.second}}s"</span> -->
                </li>
            </div>
            <!-- <li class="list" v-if="m.self == 1">
                <div class="c-wrap my">
                    <div class="content" v-if="m.type == 0" v-html="dealContent(m.content)"></div>
                    <div class="content" v-if="m.type == 1">
                        <div class="img img-h">
                            <img :src="m.content" @load="imgCss(m.content, $event)" onerror="this.onerror=null;this.src='./image/error-img.png'" alt="">
                        </div>
                    </div>
                    <div class="tx img-h">
                        <img :src="m.head_portrait" @load="imgCss(m.head_portrait, $event)" onerror="this.onerror=null;this.src='./image/touxiang.png'" alt="">
                    </div>
                </div>
            </li> -->
        </div>
    </ul>
    <footer id="input-footer">
        <div class="img-pre" v-show="preview.id">
            {{preview.content}} <br />
            <img v-if="preview.image" :src="imgurl + preview.image" alt="">
        </div>
        <div class="words">
            <div class="item"><div @click="addTemp" class="text" style="background: black;color: white;">添加常用语</div></div>
            <div class="item" v-for="item in words" @click="sendTemp(item)" @mouseover="imgpre(item, $event)" @mouseout="clearpreview">
                <div class="text">
                    {{item.content}}
                    <img v-if="item.channel==3" :src="imgurl + item.image" alt="">
                </div>

            </div>
        </div>
        <div class="input-wrap flex">
            <div id="js-input" class="input" @input="input" contenteditable="true" onfocus="inputFocus()"></div>
            <!-- <input type="text" class="input" onfocus="inputFocus()"> -->
            <div class="biaoqing" :class="{'jianpan': inputType==1}" @click="openEmotion()"></div>
            <div class="biaoqing add" v-if="contentType==0" @click="openPic()"></div>
            <button class="send-btn" v-if="contentType==1" onclick="sendMsg()">发送</button>
        </div>
        <div class="biaoqing-wrap" v-if="inputType==1">
            <ul class="bq flex-w">
                <li class="li" v-for="(e, eIndex) in emotionUrl" @click="addEmotion(e.name);">
                    <img :src="'./res/img/emotion/'+e.name+'.png'" alt="">
                </li>
                <!-- <li class="li">
                    <img src="./res/img/emotion/Expression_1.png" alt="">
                </li> -->
            </ul>
            <!-- <button class="bq-del"></button> -->
        </div>
        <div id="pic-wrap" v-if="inputType==2">
            <ul class="ul flex-w">
                <li class="li" onclick="selectPic()">
                    <img src="./res/img/nim_message_plus_photo_normal.png" alt="">
                </li>
                <!-- <li class="li" onclick="_url({touserid:touserid}, 'frame0/fa_hong_bao')">
                    <img src="./res/img/ic_sendluckybag.png" alt="">
                </li> -->
            </ul>
        </div>
    </footer>
    
    <!-- 图片预览模态框 -->
    <div class="image-preview-modal" id="imagePreviewModal" @click="closeImagePreview">
        <div class="image-preview-content" @click.stop>
            <button class="close-button" id="closePreview">×</button>
            <img src="" alt="预览图片" class="preview-image" id="previewImage">
        </div>
    </div>
    
    <input type="file" id="pic" multiple="multiple" accept="image/*" style="display: none;">
    <div id="js-modal"></div>
    <audio id="js-audio" style="display: none;">
        <source :src="audioObj.url" type="audio/mpeg">
    </audio>
</div>
<script src="./script/liaotian/emotion.js"></script>
<script>
  var urlBase = "/admin/member/index?search=id&name=";
  var pageId = touserid;
  var fullUrl = urlBase + pageId; // 拼接变量
  document.getElementById("get_user_info").href = fullUrl; // 设置href属性
  document.getElementById('get_user_info').target = '_blank'; 
</script>
<script>
    // var myuserid = 304;
    // var touserid = 295;
    var myVideo = document.getElementById("js-audio");
    var redId = 0;
    var view = new Vue({
        el: '#chatView',
        data: {
            myuserid: myuserid,
            touserid: touserid,
            imgurl: imgurl,
            ffList: [],
            words: [],
            words_first: [],
            emotionUrl: emotionUrl,
            // ffList: resultJson.data,
            inputType: 0, // 0 显示输入框，表情按钮，1显示表情列表，
            contentType: 0, // 输入框是否有内容 0 无 1 有
            audioObj: {
                url: '',
                id: 0,
                open: 0, // 语音 0未播放 1播放
            },
            toName: trueName,
            cityName: cityName,
            msgId: {},
            preview:{},
            // 新增图片预览相关属性
            showImagePreview: false,
            previewImageUrl: '',
			toUserContent:""
        },
        created(){
            this.getWords()
        },
        methods: {
            setUserOtherListTop(){
				let _that = this;
				_ajax('home/privatechat/topChat', function(ret) {
					 if (ret && ret.code == 200) {
						//通知外面获取列表
						getAllMsgListLiaoEmit()
					}
				}, {
				    types: 1, 
				    uid: _that.myuserid,
				    touid: _that.touserid
				})
			},
            openVideo(m) {
                window.open(returnImg(m))
            },
            // 播放语音
            openRecord: function(index) {
                var _this = this;
                var data = _this.ffList[index];
                if (_this.audioObj.id == data.id && _this.audioObj.open == 1) {
                    myVideo.pause();
                    _this.audioObj.open = 0;
                    return;
                }
                _this.audioObj.id = data.id;
                _this.audioObj.open = 1;
                _this.audioObj.url = imgurl + data.content;
                myVideo.play();
                setTimeout(function() {
                    myVideo.pause();
                    _this.audioObj.open = 0;
                }, data.second * 1000)
            },
            // 跳转 查看用户详情
            goUserInfo: function(data) {
                // var uid = data.userid;
                // var name = data.name;
                // go_userInfo(uid, name);
            },
            _url: function(param, url) {
                _url(param, url);
            },
            // 处理表情
            dealContent: function(str) {
                return getMesge(str);
            },
            // 添加表情
            addEmotion: function(name) {
                var _this = this;
                var url = './res/img/emotion/' + name + '.png';
                var html = '<img src=' + url + ' border="0" width="25"/>';
                $('.input-wrap .input').append(html);
                judgeShowSend();
            },
            // 打开表情面板
            openEmotion: function() {
                var _this = this;
                _this.inputType = _this.inputType == 1 ? 0 : 1;
                if (_this.inputType == 0) {

                }
            },
            // 打开图片面板
            openPic: function() {
                var _this = this;
                _this.inputType = _this.inputType == 2 ? 0 : 2;
            },
            // 打开红包详情
            openRed: function(data) {
                var id = data.id;
                var uid = data.userid;
                var state = data.state;
                openRed(id, uid, state)
            },
            returnImg(s) {
                return returnImg(s)
            },
            sendTemp(item) {
                if (item.content) {
                    $('.input-wrap .input').html(item.content)
                    sendMsg()
                    this.words = this.words_first
                }
                if (item.channel == 3 && item.image) {
                    sendMorePic(item.image)
                }
            },
            getWords(){
                let that = this
                _ajax('api/Privatechat/commonWords', function(ret) {
                    console.log(ret)
                    that.words_first = that.words = ret.data
                }, {
                    user_id: myuserid,
                    all:1
                })
            },
            imgpre(item,e) {
                this.preview = item
                $('.img-pre').css({
                    "left":e.pageX - $('#view1').width() - 80
                })
            },
            clearpreview(){
                this.preview = {}
            },
            input(){
                let text = $('.input-wrap .input').html()
                let words = []
                if (text) {
                    this.words_first.forEach(item=>{
                        if (item.content.indexOf(text) != -1) {
                            words.push(item)
                        }
                    })
                }
                if (words.length) {
                    this.words = words
                } else {
                    this.words = this.words_first
                }
            },
            addTemp() {
                // 显示弹窗
                var userInput = window.prompt('请输入你要添加的常用语:', '');
                if (userInput == null) {
                } else {
                  console.log(userInput);
                    let that = this
                    _ajax('api/Privatechat/addCommonWords', function(ret) {
                        console.log(ret)
                        that.getWords()
                    }, {
                        user_id: myuserid,
                        content:userInput,
                        channel: 2
                    })
                }
            },
             // 新增图片预览方法
            openImagePreview(imageUrl) {
                this.previewImageUrl = this.returnImg(imageUrl);
                this.showImagePreview = true;
                // 显示模态框并阻止背景滚动
                document.body.style.overflow = 'hidden';
                document.getElementById('imagePreviewModal').classList.add('active');
                document.getElementById('previewImage').src = this.previewImageUrl;
            },
            closeImagePreview() {
                this.showImagePreview = false;
                document.body.style.overflow = '';
                document.getElementById('imagePreviewModal').classList.remove('active');
            }
        }
    })
    
    function getAllMsgListLiaoEmit() {
	  var admin = getCookie('admin');
	  var obj = {
	    userid: admin
	  };
	  _ajax('Home/Privatechat/getOtherList', function (ret, err) { }, {
	    data: JSON.stringify(obj)
	  })
	}
    
    // var touserid = pageParam['touserid'];
    var bottomType = 0; // 是否允许轮询滚动到底部
    judgeLogin();

    // openWS()
    // 监听回车
    $('#js-input').on('keydown', function(e) {
        if (e.keyCode == 13) {
            sendMsg();
        }
    })
    $('#js-input').on('keyup', function(e) {
        judgeShowSend()
    })

    // 判断是否要显示发送
    function judgeShowSend() {
        var content = $.trim($('.input-wrap .input').html());
        view.contentType = content ? 1 : 0;
    }

    // 获取焦点
    function inputFocus() {
        // _log(111)
        view.inputType = 0;
    }

    function addMoreMsg(data) {
        var arr = [];
        for (var i = 0, len = data.length; i < len; i++) {
            if (!view.msgId[data[i].id]) {
                arr.push(data[i])
                view.msgId[data[i].id] = 1
            }
        }
        view.ffList = view.ffList.concat(arr);
    }

    // 发送消息
    function sendMsg() {
        var content = $.trim($('.input-wrap .input').html());
        if (!content) {
            _msg('内容不能为空');
            return;
        }
        $('.input-wrap .input').html('');
        content = replaceEmotion(content);
        // _log(content)
        _ajax('home/Privatechat/addTalk', function(ret) {
            _log(JSON.stringify(ret))
            bottomType = 0;
            view.inputType = 0;
            view.contentType = 0;
            pushMsg(touserid);
            goToBottom();
        }, {
            content: content,
            type: 0,
            userid: myuserid,
            touserid: touserid,
            front_id: parseInt(new Date() / 1000)
        })
    }
    getMsgList(0);
	getMsgUserContent()
    // 滚动到顶部
    _scrollToTop(function() {
        if (heigutgao == 1) {
            pagenum++;
            getMsgList(pagenum);
        }
    })
	
	function getMsgUserContent(){
		_ajax('api/privatechat/recharge_amount', function(ret) {
			view.toUserContent = ret.data.amount
		}, {
		    amount_user_id: touserid
		})
	}

    // 获取消息列表
    function getMsgList(page) {
        heigutgao = 0;
        pagenum = page;
        _ajax('home/Privatechat/getMsgList', function(ret) {
            _log(JSON.stringify(ret))
            if (ret && ret.code == 200) {
                if (page == 0) {
                    view.ffList = [];
                }
                for (var i = 0, len = ret.result.length; i < len; i++) {
                    view.msgId[ret.result[i].id] = 1;
                }
                view.ffList = ret.result.concat(view.ffList);
                if (page == 0) {
                    $('.loading').show()
                    setTimeout(function() {
                        goToBottom();
                        $('.loading').hide()
                    }, 500)
                }
                if (ret.result.length > 0) {
                    heigutgao = 1
                }
                setRead()
            }
        }, {
            userid: myuserid,
            touserid: touserid,
            page: page,
        })
    }

    //得到替换后的消息内容
    function getMesge(str) {
        if (!str) {
            return '';
        }
        str = str.replace(/\[(.+?)\]/g, function(a, b) {
            var url = './res/img/emotion/' + getEmotionUrl(a) + '.png';
            return '<img src=' + url + ' border="0" width="25"/>';
        });
        str = entityToString(str);
        return str;
    }
    // 实体字符转html代码
    function entityToString(entity) {
        // 若无实体字符则不转换
        if (entity.indexOf('&lt') == -1) return entity;
        var div = document.createElement('div');
        div.innerHTML = entity;
        var res = div.innerText || div.textContent;
        return res;
    }
    //根据表情名获取表情图片路径
    function getEmotionUrl(text) {
        for (var i = 0; i < emotionUrl.length; i++) {
            if (text == emotionUrl[i].text) {
                return emotionUrl[i].name;
            }
        }
    }


    // 滚动到底部
    function goToBottom() {
        if (bottomType == 0) {
            $('.chat-wrap').scrollTop(99999999999);
        }
    }


    // 判断 滚动到底部时
    window.addEventListener("scroll", function(e) {
        if ($(document).scrollTop() >= $(document).height() - $(window).height() - 10) {
            bottomType = 0;
        } else {
            bottomType = 1;
        }
        _log(bottomType)
    });


    // 替换表情
    function replaceEmotion(content) {
        for (var i = 0, len = emotionUrl.length; i < len; i++) {
            var img = '<img src="./res/img/emotion/' + emotionUrl[i].name + '.png" border="0" width="25">';
            var reg = new RegExp(img, 'gi');
            content = content.replace(reg, emotionUrl[i].text);
        }
        content = clearHtml(content);
        return content;
    }

    // 选择图片
    function selectPic() {
        $('#pic').click();
    }

    // 上传图片
    $('#pic').on('change', function() {
        var img = this.files;
        console.log(img)
        _upImgs(img, function(u) {
            console.log(u)
            sendMorePic(u);
        })
    })

    // 多图消息
    function sendMorePic(u) {
        var arr = u.split(',');
        var index = 0;
        a();

        function a() {
            console.log(arr[index])
            _ajax('home/privatechat/addTalk', function(ret) {
                bottomType = 0;
                view.inputType = 0;
                view.contentType = 0;
                pushMsg(touserid);
                goToBottom();
                index++;
                if (index < arr.length) {
                    a();
                }
            }, {
                type: 1,
                userid: myuserid,
                touserid: touserid,
                content: arr[index]
            })
        }
    }


    // 点击红包
    function openRed(id, uid, state) {
        if (uid == myuserid) {
            // 自己发的红包
            _url({
                id: id
            }, 'frame0/hong_bao_detail');
        } else {
            // 对方发的红包
            if (state == 0) {
                redId = id;
                // 未领取
                _load('#js-modal', 'frame0/hong_bao')
            } else {
                // 已领取
                _url({
                    id: id
                }, 'frame0/hong_bao_detail');
            }
        }
    }

    // 关闭模态框
    function closeMoneyFrm() {
        $('#js-modal').addClass('new-hide');
    }

    // function openWS() {
    // 建立长连接


    // _ws.send(JSON.stringify({
    //     userid: myuserid
    // }));


    // _ws.get(function(rets) {
    //     if (rets.indexOf('action') != -1) {
    //         rets = JSON.parse(rets);
    //         if (rets.code == 200) {
    //             if (rets.action == 'Home/Privatechat/getNewMsg') {
    //                 if (rets.data.users) {
    //                     var useObj = rets.data.users;
    //                     if ((useObj.userid != view.myuserid && useObj.userid != view.touserid) || (useObj.touserid != view.myuserid && useObj.touserid != view.touserid)) return;
    //                     if (rets.data.new && rets.data.new.length > 0) {
    //                         if (rets.data.new[0].self == 0) {
    //                             setRead();
    //                         }
    //                         view.ffList = view.ffList.concat(rets.data.new);
    //                     }
    //                     goToBottom();
    //                 }

    //             }
    //         }
    //     }
    // })
    // }

    // 设置该消息为已读
    function setRead() {
        _log('设置为已读')
        // alert(JSON.stringify(readUser))
        _ajax('Home/Privatechat/changeread', function(ret, err) {
            _ajax('Home/Privatechat/changecount', function(ret, err) {

            }, readUser)
            sessionStorage.setItem('messageCountChange', view.touserid);
            // pushMsg(readUser.user_id); // 推给自己
             var event = new Event('sessionStorageUpdated');
             window.dispatchEvent(event);
        }, readUser)
    }
        // 关闭按钮事件监听
    document.getElementById('closePreview').addEventListener('click', function() {
        chatVue.closeImagePreview();
    });
    
</script>